<template lang="html">
  <div :class="'banners banners'+banners.length">
    <el-carousel trigger="click" height="580px" arrow="always" :interval="5000">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <div v-if="item.dataNo" class="brandBannerImg cursor" @click="routeToPath('/product/'+item.dataNo, 'new')"
         :style="'background-image:url('+ URL.PIC+ item.streamMediaURL +')'"></div>
        <div v-else class="brandBannerImg"
          :style="'background-image:url('+ URL.PIC+ item.streamMediaURL +')'"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  props: ['banners']
}
</script>

<style lang="scss">
.banners1{
  .el-carousel__indicators{
    display: none;
  }
}

.banners{
  .el-carousel__arrow--left{
    left: 200px;
  }
  .el-carousel__arrow--right{
    right: 200px;
  }
  .el-carousel__arrow{
    width: 50px;
    height: 50px;
  }
  .el-carousel__arrow i{
    font-size: 20px;
  }
  .el-carousel__indicators{
    margin-bottom: 20px;
  }
  .el-carousel__indicator .el-carousel__button{
    height: 4px;
    width: 40px;
  }
}
.store-swiperBanner{
  .el-carousel{
    width: 100%;
  }
  .brandBannerImg{
    width: 100%;
    height: 580px;
    min-width: 1200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}
</style>
